<template>
  <div>
    <el-table :data="person" border style="width: 60%" class="table">
      <el-table-column prop="id" label="Id" width="50"> </el-table-column>
      <el-table-column prop="name" label="Name" width="100"> </el-table-column>
      <el-table-column prop="isStudent" label="IsStudent">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isStudent"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="hobby" label="hobby"></el-table-column>
      <el-table-column prop="creatTime" label="CreateTime">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="small" @click="editRow(scope.row)">编辑</el-button>
          <el-popconfirm
            confirm-button-text="YES"
            cancel-button-text="NO"
            icon="el-icon-info"
            icon-color="red"
            title="Are you sure???"
            @confirm="deleteRow(scope.$index, person)"
          >
            <el-button slot="reference" size="small">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <button @click="doSome">doSome</button>
    <Edit :dialogVisible.sync="dialogVisible" :rowData.sync="rowData"/>
    <!-- :b="bmsg" @update:b="(val)=>{return this.bmsg=val} -->
  </div>
</template>

<script>
import Edit from "./Edit.vue";
export default {
  props: {
    person: {
      type: [],
      require: true,
    },
  },
  data() {
    return {
      dialogVisible: false,
      // 这里一定要注意不能先填null值，因为上来直接渲染了，就算后面是动态绑定无不能用了
      rowData: {
        name:'',
        hobby:''
      },
    };
  },
  methods: {
    deleteRow(index, rows) {
      rows.splice(index, 1);
      this.$message({
        type: "success",
        message: "REMOVE SUCCESS",
        center: true,
      });
    },
    editRow(row) {
     //这里一定要注意，不能直接=,因为是对象
      this.rowData = JSON.parse(JSON.stringify(row))
      this.dialogVisible = true;
    },
    doSome(){
      console.log(this.rowData);
    }
    
  },
  components: {
    Edit,
  },
};
</script>

<style>

</style>